<template>
<div id="footer" class="footer" v-show="doctorShow">
  <mu-flexbox>
    <mu-flexbox-item class="center">
      <router-link :to="INDEX_URL">
      <i class="iconfont icon-home1"></i>
      <span class="footer-title">首页</span>
      </router-link>
    </mu-flexbox-item>
 <!--    <mu-flexbox-item class="center">
      <router-link to="/doctor/message">
      <i class="iconfont icon-message01"></i>
      <span class="footer-title">消息</span>
      </router-link>
    </mu-flexbox-item>  -->
    <mu-flexbox-item class="center">
      <router-link to="/doctor/contacts">
      <i class="iconfont icon-user"></i>
      <span class="footer-title">通讯录</span>
      </router-link>
    </mu-flexbox-item>
    <mu-flexbox-item class="center">
      <router-link :to="SETTING_URL">
      <i class="iconfont icon-yonghu_shezhi"></i>
      <span class="footer-title">我的</span>
      </router-link>
    </mu-flexbox-item>
  </mu-flexbox>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
      bottomNavColor: 'home',
      INDEX_URL: '/doctor/index',
      SETTING_URL: '/doctor/setting'
    }
  },
  computed: {
    ...mapState({
      doctorShow: state => state.footer.doctorShow
    })
  }
}
</script>
<style lang="less">
@import '../common/css/vars.less';
.router-link-active {
  color: @color-primary;
}
.footer a{
  height: 56px;
  display: block;
  color: #666;
  .iconfont{
    display: block;
  }
  &.router-link-active{
    color: @color-primary;
  }
}

</style>

